diff options
Diffstat (limited to 'cloud/app/src/routes/workspace/[id].css')
| -rw-r--r-- | cloud/app/src/routes/workspace/[id].css | 674 |
1 files changed, 0 insertions, 674 deletions
diff --git a/cloud/app/src/routes/workspace/[id].css b/cloud/app/src/routes/workspace/[id].css index b08ae24d7..b054af090 100644 --- a/cloud/app/src/routes/workspace/[id].css +++ b/cloud/app/src/routes/workspace/[id].css @@ -110,678 +110,4 @@ } } } - - /* API Keys Section */ - [data-component="api-keys-section"] { - [data-slot="create-form"] { - display: flex; - flex-direction: column; - gap: var(--space-3); - padding: var(--space-4); - border: 1px solid var(--color-border); - border-radius: var(--border-radius-sm); - - [data-slot="input-container"] { - display: flex; - flex-direction: column; - gap: var(--space-1); - } - - @media (max-width: 30rem) { - gap: var(--space-2); - } - - input { - flex: 1; - padding: var(--space-2) var(--space-3); - border: 1px solid var(--color-border); - border-radius: var(--border-radius-sm); - background-color: var(--color-bg); - color: var(--color-text); - font-size: var(--font-size-sm); - font-family: var(--font-mono); - - &:focus { - outline: none; - border-color: var(--color-accent); - } - - &::placeholder { - color: var(--color-text-disabled); - } - } - - [data-slot="form-actions"] { - display: flex; - gap: var(--space-2); - } - - [data-slot="form-error"] { - color: var(--color-danger); - font-size: var(--font-size-sm); - margin-top: var(--space-1); - line-height: 1.4; - } - } - - [data-slot="api-keys-table"] { - overflow-x: auto; - } - - [data-slot="api-keys-table-element"] { - width: 100%; - border-collapse: collapse; - font-size: var(--font-size-sm); - - thead { - border-bottom: 1px solid var(--color-border); - } - - th { - padding: var(--space-3) var(--space-4); - text-align: left; - font-weight: normal; - color: var(--color-text-muted); - text-transform: uppercase; - } - - td { - padding: var(--space-3) var(--space-4); - border-bottom: 1px solid var(--color-border-muted); - color: var(--color-text-muted); - font-family: var(--font-mono); - - &[data-slot="key-name"] { - color: var(--color-text); - font-family: var(--font-sans); - font-weight: 500; - } - - &[data-slot="key-value"] { - font-family: var(--font-mono); - - button { - display: flex; - align-items: center; - gap: var(--space-2); - padding: var(--space-2) var(--space-3); - font-size: var(--font-size-sm); - font-weight: 400; - border: none; - background-color: transparent; - color: var(--color-text-muted); - font-family: var(--font-mono); - border-radius: var(--border-radius-sm); - cursor: pointer; - transition: all 0.15s ease; - text-transform: none; - - &:hover:not(:disabled) { - background-color: var(--color-bg-surface); - color: var(--color-text); - } - - &:disabled { - cursor: default; - color: var(--color-text); - } - - span { - font-family: inherit; - } - } - } - - &[data-slot="key-date"] { - color: var(--color-text); - } - - &[data-slot="key-actions"] { - font-family: var(--font-sans); - } - } - - tbody tr { - &:last-child td { - border-bottom: none; - } - } - - @media (max-width: 40rem) { - th, - td { - padding: var(--space-2) var(--space-3); - font-size: var(--font-size-xs); - } - - th { - &:nth-child(3) /* Date */ { - display: none; - } - } - - td { - &:nth-child(3) /* Date */ { - display: none; - } - } - } - } - } - - /* Billing Section */ - [data-component="billing-section"] { - [data-slot="section-content"] { - display: flex; - flex-direction: column; - gap: var(--space-3); - } - - [data-slot="reload-error"] { - display: flex; - align-items: center; - justify-content: space-between; - gap: var(--space-4); - padding: var(--space-4); - border: 1px solid var(--color-border); - border-radius: var(--border-radius-sm); - - p { - color: var(--color-danger); - font-size: var(--font-size-sm); - line-height: 1.4; - margin: 0; - flex: 1; - } - - [data-slot="create-form"] { - display: flex; - gap: var(--space-2); - margin: 0; - flex-shrink: 0; - } - } - [data-slot="payment"] { - display: flex; - flex-direction: column; - gap: var(--space-3); - padding: var(--space-4); - border: 1px solid var(--color-border); - border-radius: var(--border-radius-sm); - min-width: 14.5rem; - width: fit-content; - - [data-slot="credit-card"] { - padding: var(--space-3-5) var(--space-4); - background-color: var(--color-bg-surface); - border-radius: var(--border-radius-sm); - display: flex; - align-items: center; - justify-content: space-between; - - [data-slot="card-icon"] { - display: flex; - align-items: center; - } - - [data-slot="card-details"] { - display: flex; - align-items: baseline; - gap: var(--space-1); - - [data-slot="secret"] { - position: relative; - bottom: 2px; - font-size: var(--font-size-lg); - color: var(--color-text-muted); - font-weight: 400; - } - - [data-slot="number"] { - font-size: var(--font-size-3xl); - font-weight: 500; - color: var(--color-text); - } - } - } - - [data-slot="button-row"] { - display: flex; - gap: var(--space-2); - align-items: center; - - [data-slot="create-form"] { - margin: 0; - } - - /* Make Enable Billing button full width when it's the only button */ - > button { - flex: 1; - } - } - } - [data-slot="usage"] { - p { - font-size: var(--font-size-sm); - line-height: 1.5; - color: var(--color-text-secondary); - b { - font-weight: 600; - } - } - } - } - - /* Monthly Limit Section */ - [data-component="monthly-limit-section"] { - [data-slot="section-content"] { - display: flex; - flex-direction: column; - gap: var(--space-3); - } - - [data-slot="balance"] { - display: flex; - flex-direction: column; - gap: var(--space-3); - padding: var(--space-4); - border: 1px solid var(--color-border); - border-radius: var(--border-radius-sm); - min-width: 15rem; - width: fit-content; - - [data-slot="amount"] { - padding: var(--space-3-5) var(--space-4); - background-color: var(--color-bg-surface); - border-radius: var(--border-radius-sm); - display: flex; - align-items: baseline; - gap: var(--space-1); - justify-content: flex-end; - - [data-slot="currency"] { - position: relative; - bottom: 2px; - font-size: var(--font-size-lg); - color: var(--color-text-muted); - font-weight: 400; - } - - [data-slot="value"] { - font-size: var(--font-size-3xl); - font-weight: 500; - color: var(--color-text); - } - } - - [data-slot="create-form"] { - display: flex; - flex-direction: column; - gap: var(--space-3); - margin-top: var(--space-1); - - [data-slot="input-container"] { - display: flex; - flex-direction: column; - gap: var(--space-1); - } - - @media (max-width: 30rem) { - gap: var(--space-2); - } - - input { - flex: 1; - padding: var(--space-2) var(--space-3); - border: 1px solid var(--color-border); - border-radius: var(--border-radius-sm); - background-color: var(--color-bg); - color: var(--color-text); - font-size: var(--font-size-sm); - font-family: var(--font-mono); - - &:focus { - outline: none; - border-color: var(--color-accent); - } - - &::placeholder { - color: var(--color-text-disabled); - } - } - - [data-slot="form-actions"] { - display: flex; - gap: var(--space-2); - justify-content: flex-end; - } - - [data-slot="form-error"] { - color: var(--color-danger); - font-size: var(--font-size-sm); - margin-top: var(--space-1); - line-height: 1.4; - } - } - } - - [data-slot="usage-status"] { - font-size: var(--font-size-sm); - color: var(--color-text-secondary); - margin: 0; - line-height: 1.4; - } - } - - /* Payments Section */ - [data-component="payments-section"] { - [data-slot="payments-table"] { - overflow-x: auto; - } - - [data-slot="payments-table-element"] { - width: 100%; - border-collapse: collapse; - font-size: var(--font-size-sm); - - thead { - border-bottom: 1px solid var(--color-border); - } - - th { - padding: var(--space-3) var(--space-4); - text-align: left; - font-weight: normal; - color: var(--color-text-muted); - text-transform: uppercase; - } - - td { - padding: var(--space-3) var(--space-4); - border-bottom: 1px solid var(--color-border-muted); - color: var(--color-text-muted); - font-family: var(--font-mono); - - &[data-slot="payment-date"] { - color: var(--color-text); - } - - &[data-slot="payment-id"] { - font-family: var(--font-mono); - font-weight: 400; - color: var(--color-text-muted); - max-width: 200px; - word-break: break-word; - } - - &[data-slot="payment-amount"] { - color: var(--color-text); - } - } - - tbody tr { - &:last-child td { - border-bottom: none; - } - } - - @media (max-width: 40rem) { - th, - td { - padding: var(--space-2) var(--space-3); - font-size: var(--font-size-xs); - } - - th { - &:nth-child(2) /* Payment ID */ { - display: none; - } - } - - td { - &:nth-child(2) /* Payment ID */ { - display: none; - } - } - } - } - } - - /* Usage Section */ - [data-component="usage-section"] { - [data-slot="usage-table"] { - overflow-x: auto; - } - - [data-slot="usage-table-element"] { - width: 100%; - border-collapse: collapse; - font-size: var(--font-size-sm); - - thead { - border-bottom: 1px solid var(--color-border); - } - - th { - padding: var(--space-3) var(--space-4); - text-align: left; - font-weight: normal; - color: var(--color-text-muted); - text-transform: uppercase; - } - - td { - padding: var(--space-3) var(--space-4); - border-bottom: 1px solid var(--color-border-muted); - color: var(--color-text-muted); - font-family: var(--font-mono); - - &[data-slot="usage-date"] { - color: var(--color-text); - } - - &[data-slot="usage-model"] { - font-family: var(--font-sans); - font-weight: 400; - color: var(--color-text-secondary); - max-width: 200px; - word-break: break-word; - } - - &[data-slot="usage-cost"] { - color: var(--color-text); - } - } - - tbody tr { - &:last-child td { - border-bottom: none; - } - } - - @media (max-width: 40rem) { - th, - td { - padding: var(--space-2) var(--space-3); - font-size: var(--font-size-xs); - } - - th { - &:nth-child(2) /* Model */ { - display: none; - } - } - - td { - &:nth-child(2) /* Model */ { - display: none; - } - } - } - } - } - - [data-slot="new-user-sections"] { - display: flex; - flex-direction: column; - gap: var(--space-8); - padding: var(--space-6); - background-color: var(--color-bg-surface); - border: 1px dashed var(--color-border); - border-radius: var(--border-radius-sm); - - @media (max-width: 30rem) { - gap: var(--space-8); - padding: var(--space-4); - } - - [data-component="feature-grid"] { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); - gap: var(--space-6); - - @media (max-width: 30rem) { - grid-template-columns: 1fr; - gap: var(--space-4); - } - - [data-slot="feature"] { - display: flex; - flex-direction: column; - gap: var(--space-2); - padding: var(--space-4); - border: 1px solid var(--color-border); - border-radius: var(--border-radius-sm); - - h3 { - font-size: var(--font-size-sm); - font-weight: 600; - margin: 0; - color: var(--color-text); - text-transform: uppercase; - letter-spacing: -0.025rem; - } - - p { - font-size: var(--font-size-sm); - line-height: 1.5; - margin: 0; - color: var(--color-text-muted); - } - } - } - - [data-component="api-key-highlight"] { - display: flex; - flex-direction: column; - gap: var(--space-6); - - [data-slot="section-title"] { - display: flex; - flex-direction: column; - gap: var(--space-1); - - h2 { - font-size: var(--font-size-md); - font-weight: 600; - line-height: 1.2; - letter-spacing: -0.03125rem; - margin: 0; - color: var(--color-text-secondary); - text-transform: uppercase; - - @media (max-width: 30rem) { - font-size: var(--font-size-md); - } - } - } - - [data-slot="key-display"] { - display: flex; - flex-direction: column; - gap: var(--space-3); - - [data-slot="key-container"] { - display: flex; - gap: var(--space-3); - padding: var(--space-4); - border: 2px solid var(--color-accent); - border-radius: var(--border-radius-sm); - align-items: center; - - @media (max-width: 40rem) { - flex-direction: column; - gap: var(--space-3); - align-items: stretch; - } - - [data-slot="key-value"] { - flex: 1; - font-family: var(--font-mono); - font-size: var(--font-size-sm); - color: var(--color-text); - background-color: var(--color-bg); - padding: var(--space-3); - border-radius: var(--border-radius-sm); - border: 1px solid var(--color-border); - word-break: break-all; - line-height: 1.4; - - @media (max-width: 40rem) { - font-size: var(--font-size-xs); - padding: var(--space-2-5); - } - } - - button { - display: flex; - align-items: center; - gap: var(--space-2); - padding: var(--space-3) var(--space-4); - font-size: var(--font-size-sm); - font-weight: 500; - white-space: nowrap; - min-width: 130px; - - @media (max-width: 40rem) { - justify-content: center; - padding: var(--space-2-5) var(--space-3); - font-size: var(--font-size-xs); - min-width: 96px; - } - } - } - } - } - - [data-component="next-steps"] { - display: flex; - flex-direction: column; - gap: var(--space-6); - - ol { - margin: 0; - padding-left: 0; - display: flex; - flex-direction: column; - gap: var(--space-2); - list-style-position: inside; - - li { - font-size: var(--font-size-md); - line-height: 1.5; - color: var(--color-text-secondary); - - code { - font-family: var(--font-mono); - font-size: var(--font-size-sm); - padding: var(--space-1) var(--space-2); - border: 1px solid var(--color-border); - border-radius: var(--border-radius-sm); - color: var(--color-text); - } - } - } - } - } } |
